跳至主要内容

VueX

信息

原始 MD by 孟憲

VueX

By Jimmy 111/05/25

What is VueX???​

Vue.component('my-component', {
  template: `<div>Hello Vue!</div>`,
  data () {},
  props: {},
  computed: {},
  methods: {},
});
const vm = new Vue({ }).$mount('#app');
  • data:不解釋
  • template:模板（引入 HTML 字串模板）
  • computed:計算屬性
  • methods:HTML 的功能、互動「非同步事件」

Props：Vue.js 每個元件的實體狀態、模板等作用範圍必須是"獨立"的​

因此就無法以父元件「直接」去修改子元件。 那麼，既然不能直接修改，那麼上下層元件之間，若需要從外部引進資料時，就需要透過 props 引用外部的狀態

但是...​

因此 Vuex 就是出來拯救大專案的人們啊啊啊啊^^

Vuex 可以做為網站的全域狀態管理，可以將全域狀態集中管理​

有點類似 Event Bus，但是 Event bus 比較像是一個全域的事件--​

組件 B 可以 emit 送出 bus 的事件或資料，而組件 C 則是可以透過 on 來監聽 bus 發出的事件或接收資料。

State:儲存狀態

當組件需要更動狀態時，需要透過 Actions 發出一個 Commit 去呼叫 Mutations，再由 Mutations 去更改 State。​

而整個 Vuex 的方法也稱為 Store。

根據圖片，流程大致如下​

  • Components 透過 State 內的資料 render 出畫面
  • 資料需要變動時，透過 Actions commit 一個 Mutation
  • Mutation 變更 State 中的資料
  • Components 重新 render 變化後的結果

那如何安裝 vuex??​

Sol_1 BY Terminal​

vue add vuex

註：只有在 vue 專案已經建立之下才有用

sol_2 BY Vue CLI​

讓我們看看各個元件的用途​

State:有著 store 內所有資料的物件

state: {
  numbers: [1,3,5,7,9]
}

Mutations:就是包含著一堆函數的物件，每一個 mutation 就是一個函數，負責接收 actions 並更改 state 的資料，但要注意

  • mutation 必定是同步函數，沒有例外
  • mutation 是 vuex 中唯一可以改動 state 的方法

改變 State 狀態=>

  • 發出一個 Action(dispatch an action)
  • 接收到 Action 後，執行對應的 Mutation (commit a mutation)
  • 透過 Mutation 更改 State

那我們實際寫一個 mutation ㄅ

mutations: {
    ADD_NUMBER(state,payload) {
      state.numbers.push(payload)
    }
},
  • state => 可以自由取用或更動 state 的數值
  • payload => 從 actions 傳來的參數

Actions:呼叫 Mutations 而存在的東西

  • Actions 可以是非同步函數
  • 一個 Action 中可以觸發多個 Mutation

那實際寫一個 Actions ㄅ

actions: {
    addNumber(context,number) {
      context.commit("ADD_NUMBER", number)
  }
}
  • context 是一個物件，裡面可以使用 store 中的 commit、getter 或是 state 屬性
  • 想傳入 mutation 的參數，沒有要傳入則可省略

getters:基本上就跟 vue 裡面的 state 意思一樣，渲染之前，先對資料進行運算及過濾等～ 假設今天 state 中的資料有一個數字陣列，由於某種需求，希望使用時他是個"排序後"的陣列，當然可以到組件時再進行一次運算，但如果今天是數個組件都要用相同的邏輯，那 getter 就發揮作用ㄌ！

看個例子：

getters: {
    sortedNumbers(state) {
      return state.numbers.sort((a, b) => a - b)
    },
},

箭頭函式 XD

getters: {
    sortedNumbers: (state) => state.numbers.sort((a, b) => a - b)
 },

講了這麼多，那怎麼用？？​

  • 在安裝 vuex 後，你 root 的 vue 實體就會被掛上一個$store 物件
this.$store.state.numbers
this.$store.dispatch('某action')
this.$store.commit('某mutation')
this.$store.getters.sortedNumbers
...

接下來我們用這個網址講解～～ https://ithelp.ithome.com.tw/articles/10248514